<template>
  <div class="filter" @touchmove="(e) => e.stopPropagation()">
    <div class="scroll gap-row-8">
      <div
        v-for="(filter, index) in props.items"
        :key="`filter-tag-${index}`"
        class="tag"
        :class="{ active: modelValue === filter }"
        @click="() => (modelValue = filter)"
      >
        <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">
          {{ $t(filter[`${itemLabel}`]) }}
        </div>
      </div>
      <div class="mr-6"></div>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  items: {
    type: Array,
    required: true,
  },
  itemValue: {
    type: String,
    default: 'value',
  },
  itemLabel: {
    type: String,
    default: 'label',
  },
})

const emit = defineEmits(['update:modelValue'])

const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
</script>
<style scoped lang="scss">
.filter {
  position: relative;

  .scroll {
    width: auto;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-wrap: normal;

    .tag {
      display: inline-block;
      padding: 0.375rem 1rem;
      justify-content: center;
      align-items: center;
      white-space: nowrap;

      border-radius: 3.125rem;
      background: var(--bg-dialog, #333546);
    }

    .active {
      background: var(--color-primary-gradient, linear-gradient(180deg, #f95e0e 0%, #e717b3 100%));
    }
  }

  .dropdown-container {
    display: flex;
    align-items: flex-start;
    position: absolute;
    right: 0;

    .dropdown {
      width: 2rem;
      height: 2rem;

      border-radius: 1.875rem 0rem 0rem 1.875rem;
      background: rgba(24, 25, 37, 0.02);
      backdrop-filter: blur(9px);
    }
  }
}
</style>
